<template>
	<Header />
	<div class="detailTopOuter">
		<div class="detailTop">
			<!-- 面包屑 -->
			<el-breadcrumb :separator-icon="ArrowRight">
				<el-breadcrumb-item>课程</el-breadcrumb-item>
				<el-breadcrumb-item>免费课</el-breadcrumb-item>
				<el-breadcrumb-item>2023前端从零入门到实践</el-breadcrumb-item>
			</el-breadcrumb>
			<h3 class="center">2023前端从零入门到实践</h3>
			<div class="bootom">课程数据，从接口中获取，但是现在没有</div>
		</div>
	</div>
	<div class="detailContentOuter">
		<div class="tabName">
			<ul>
				<li :class="{ active: isShow === 0 }" @click="isShow = 0">章节</li>
				<li :class="{ active: isShow === 1 }" @click="isShow = 1">下载笔记代码</li>
			</ul>
		</div>
		<div class="chapterOuter" v-if="isShow === 0">
			<div class="chapterSynopsis">
				<div class="chapterSynopsisText">简介文字太多了懒得写</div>
				<div class="chapterSynopsisBtn">
					<el-button type="danger" round>立即购买</el-button>
					<el-button color="#fde7e7" round>加入购物车</el-button>
				</div>
			</div>
			<div class="chapterListOuter">
				<div class="chapterList">
					<div class="chapterListTitle">
						<h3>第一章</h3>
						<p>描述</p>
					</div>
					<ul class="chapterListContent">
						<li>
							<div class="chapterListContentL">
								<i class="iconfont icon-shipin"></i>
								<div><span class="video">视频</span>：1-1......</div>
							</div>
							<div class="chapterListContentR">
								<el-button type="primary" round>开始学习</el-button>
							</div>
						</li>
						<li>
							<div class="chapterListContentL">
								<i class="iconfont icon-shipin"></i>
								<div><span class="video">视频</span>：1-1......</div>
							</div>
							<div class="chapterListContentR">
								<el-button type="primary" round>开始学习</el-button>
							</div>
						</li>
					</ul>
				</div>
				<div class="chapterList">
					<div class="chapterListTitle">
						<h3>第一章</h3>
						<p>描述</p>
					</div>
					<ul class="chapterListContent">
						<li>
							<div class="chapterListContentL">
								<i class="iconfont icon-shipin"></i>
								<div><span class="video">视频</span>：1-1......</div>
							</div>l
							<div class="chapterListContentR">
								<el-button type="primary" round>开始学习</el-button>
							</div>
						</li>
						<li>
							<div class="chapterListContentL">
								<i class="iconfont icon-shipin"></i>
								<div><span class="video">视频</span>：1-1......</div>
							</div>
							<div class="chapterListContentR">
								<el-button type="primary" round>开始学习</el-button>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="tabNotesOuter" v-if="isShow === 1">
			<ul class="tabNotes">
				<li>
					<div class="tabNotesL">
						<i class="iconfont icon-xiazai-wenjianxiazai-16"></i>
						<span>01</span>
						<span>课程介绍</span>
					</div>
					<span class="tabNotesR">
						<el-button type="primary" round>下载资料</el-button>
					</span>
				</li>
				<li>
					<div class="tabNotesL">
						<span>01</span>
						<span>课程介绍</span>
					</div>
					<span class="tabNotesR">
						<el-button type="primary" round>下载资料</el-button>
					</span>
				</li>
			</ul>
		</div>
	</div>
	<Footer />
</template>

<script setup lang="ts">
	import {
		ref,
		onBeforeMount
	} from 'vue';
	import {
		useRoute
	} from 'vue-router';

	import {
		getDetail
	} from '../request/api/api'

	import Header from '../components/common/Header.vue';
	import Footer from '../components/common/Footer.vue';
	import {
		ArrowRight
	} from '@element-plus/icons-vue';

	onBeforeMount(() => {
		getCourseDetail()
	})

	// 章节 与 笔记代码切换
	let isShow = ref < number > (0)

	// 路由
	const route = useRoute()

	const getCourseDetail = async () => {
		const {
			data: res
		} = await getDetail({
			courseId: route.query.id
		})
		console.log(res.data)
	}
</script>

<style lang="scss" scoped>
	$border: 1px solid orange;
	$boxShadow: -10px 15px 10px -15px rgba($color: #383838, $alpha: .3);

	.detailTopOuter {
		width: 100%;
		height: 183px;
		padding: 20px 0;
		background: linear-gradient(to right, rgb(74, 234, 255) 0%, rgb(155, 121, 202) 50%, rgb(74, 234, 255) 100%);

		.detailTop {
			width: 80%;
			margin: 0 auto;

			.el-breadcrumb {
				:v-deep .el-breadcrumb__separator {
					color: white
				}

				:v-deep .el-breadcrumb__item .el-breadcrumb__inner {
					color: white;
				}
			}

			.center {
				font-weight: 500;
				font-size: 26px;
				color: white;
				margin-top: 40px;
				margin-bottom: 30px;
			}

			.bootom {
				font-weight: normal;
				font-size: 16px;
				color: white;
			}
		}
	}

	.detailContentOuter {
		width: 100%;

		.tabName {
			width: 80%;
			height: 57px;
			margin: 0 auto;
			box-shadow: -10px 15px 10px -15px rgba($color: #383838, $alpha: .3);
			margin-bottom: 5px;

			ul {
				width: 100%;
				height: 57px;
				display: flex;
				align-items: center;

				li {
					font-size: 16px;
					color: black;
					cursor: pointer;
				}

				&>li:first-child {
					margin-right: 60px;
				}

				.active {
					color: #388fff;
					font-weight: bold;
					position: relative;

					&::after {
						content: '';
						width: 50%;
						height: 3px;
						border-radius: 1px;
						background-color: #388fff;
						position: absolute;
						left: 50%;
						bottom: -8px;
						margin-left: -26%;
					}
				}
			}
		}

		.chapterOuter {
			width: 100%;
			background-color: #f8fafc;
			padding: 20px 0;
			position: relative;

			.chapterSynopsis {
				width: 80%;
				margin: 0 auto;
				background-color: #fff;
				padding: 20px;
				position: relative;

				.chapterSynopsisText {
					padding: 26px 20px;
					font-size: 14px;
				}

				.chapterSynopsisBtn {
					position: absolute;
					right: 10px;
					bottom: 10px;
				}
			}

			.chapterListOuter {
				border: $border;
				width: 80%;
				margin: 0 auto;
				margin-top: 30px;
				margin-bottom: 30px;

				.chapterList {
					padding: 20px 26px;
					margin-bottom: 10px;
					background-color: #fff;
					border-radius: 5px;
					box-shadow: 0 10px 5px -15px rgba($color: #000000, $alpha: .1);

					.chapterListTitle {
						&>p {
							font-size: 14px;
							margin: 20px 0;
						}
					}

					.chapterListContent {
						&>li {
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-bottom: 26px;
							border: 1px solid #fff;

							.chapterListContentL {
								display: flex;
								align-items: center;

								&>i {
									margin-right: 10px;
								}

								.video {
									font-weight: bold;
								}
							}
						}
					}
				}

			}
		}

		.tabNotesOuter {
			width: 100%;

			.tabNotes {
				width: 80%;
				margin: 0 auto;
				border: $border;
				padding: 20px;
				margin-bottom: 30px;
				margin-top: 20px;

				&>li {
					margin-bottom: 16px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 5px;
					box-shadow: $boxShadow;

					.tabNotesL {
						&>i {
							margin-right: 10px;
						}
					}
				}

				&>li:last-of-type {
					margin-bottom: 0;
				}
			}
		}
	}
</style>
